<template>
  <div id="resume">
    <div class="resume_operation">
      <el-button type="primary" size="small" @click="news"><i class="el-icon-plus"></i>新建</el-button>
      <el-button type="primary" size="small" @click="edit"><i class="el-icon-edit"></i>编辑</el-button>
      <el-button type="primary" size="small" @click="dialogVisible=true"><i class="el-icon-delete"></i>删除</el-button>
      <el-select v-model="resumeName" placeholder="请选择" style="float:right">
        <el-option
            v-for="resume in resumeList"
            :key="resume.resumeName"
            :label="resume.resumeName"
            :value="resume.resumeName"
        >
        </el-option>
      </el-select>
      <el-divider></el-divider>
      <el-descriptions :column="3" border :labelStyle="{'width':'100px'}">
        <el-descriptions-item label="照片">
          <el-image :src="this.resume.photoUrl" style="width:40px;height:50px">
            <div slot="error" class="image-slot">
              <i class="el-icon-picture-outline" style="font-size: 40px;color:#E4E7ED"></i>
            </div>
          </el-image>
        </el-descriptions-item>
        <el-descriptions-item label="姓名">{{ this.resume.name }}</el-descriptions-item>
        <el-descriptions-item label="性别">{{ this.resume.sex }}</el-descriptions-item>
        <el-descriptions-item label="年龄">{{ this.resume.age }}</el-descriptions-item>
        <el-descriptions-item label="民族">{{ this.resume.nation }}</el-descriptions-item>
        <el-descriptions-item label="籍贯">{{ this.resume.nativePlace }}</el-descriptions-item>
        <el-descriptions-item label="居住地">{{ this.resume.residence }}</el-descriptions-item>
        <el-descriptions-item label="手机号">{{ this.resume.tel }}</el-descriptions-item>
        <el-descriptions-item label="邮箱">{{ this.resume.email }}</el-descriptions-item>
        <el-descriptions-item label="政治面貌">{{ this.resume.politicsStatus }}</el-descriptions-item>
        <el-descriptions-item label="期望薪资">{{ this.resume.expectSalary }}</el-descriptions-item>
        <el-descriptions-item label="最高学历">{{ this.resume.maxEdu }}</el-descriptions-item>
        <el-descriptions-item label="毕业院校">{{ this.resume.university }}</el-descriptions-item>
        <el-descriptions-item label="毕业时间">{{ this.resume.graduationTime }}</el-descriptions-item>
        <el-descriptions-item label="工作时间" :span="2">{{ this.resume.workTime }}</el-descriptions-item>
        <el-descriptions-item label="自我评价" :span="3">{{ this.resume.selfEvaluation }}</el-descriptions-item>
        <el-descriptions-item label="技能" :span="3">{{ this.resume.skill }}</el-descriptions-item>
        <el-descriptions-item label="工作经历" :span="3">{{ this.resume.workExperience }}</el-descriptions-item>
        <el-descriptions-item label="项目经历" :span="3">{{ this.resume.project }}</el-descriptions-item>
        <el-descriptions-item label="所获荣誉" :span="3">{{ this.resume.honor }}</el-descriptions-item>
        <el-descriptions-item label="附件" :span="3">
          <el-link :href="this.resume.accessoryUrl" type="primary"> 下载</el-link>
        </el-descriptions-item>
      </el-descriptions>
      <el-dialog title="个人简历" :visible.sync="dialogFormVisible" :close-on-click-modal=false top="0" width="60%">
        <el-form :model="infoForm" ref="infoForm">
          <el-form-item label="简历名称" :label-width="formLabelWidth">
            <el-input  v-model="infoForm.resumeName" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="照片" :label-width="formLabelWidth" >
            <el-upload
                ref="upload"
                action="/api/upload/?ser=user"
                :on-success="uploadSuccess"
                :limit="1"
                :auto-upload="true">
              <i class="el-icon-upload"> 点击上传</i>
            </el-upload>
          </el-form-item>
          <el-form-item label="姓名" :label-width="formLabelWidth">
            <el-input v-model="infoForm.name" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="性别" :label-width="formLabelWidth" >
            <el-radio v-model="infoForm.sex" label="男">男</el-radio>
            <el-radio v-model="infoForm.sex" label="女">女</el-radio>
          </el-form-item>
          <el-form-item label="年龄" :label-width="formLabelWidth" >
            <el-input v-model="infoForm.age" type="number" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="民族" :label-width="formLabelWidth" >
            <el-input v-model="infoForm.nation" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="籍贯" :label-width="formLabelWidth" >
            <el-input v-model="infoForm.nativePlace" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="居住地" :label-width="formLabelWidth" >
            <el-input v-model="infoForm.residence" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="手机号" :label-width="formLabelWidth" >
            <el-input v-model="infoForm.tel" type="number" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="电子邮箱" :label-width="formLabelWidth" >
            <el-input v-model="infoForm.email" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="政治面貌" :label-width="formLabelWidth" >
            <el-input v-model="infoForm.politicsStatus" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="期望薪资" :label-width="formLabelWidth" >
            <el-input v-model="infoForm.expectSalary" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="最高学历" :label-width="formLabelWidth" >
            <el-input v-model="infoForm.maxEdu" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="毕业院校" :label-width="formLabelWidth" >
            <el-input v-model="infoForm.university" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="毕业时间" :label-width="formLabelWidth" >
            <el-date-picker
                v-model="infoForm.graduationTime"
                type="date"
                placeholder="选择日期">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="工作时间" :label-width="formLabelWidth" >
            <el-input v-model="infoForm.workTime" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="自我评价" :label-width="formLabelWidth" >
            <el-input type="textarea" :row="50" v-model="infoForm.selfEvaluation"
                      autocomplete="off"></el-input>
          </el-form-item>

          <el-form-item label="技能" :label-width="formLabelWidth" >
            <el-input type="textarea" :row="50" v-model="infoForm.skill"
                      autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="工作经历" :label-width="formLabelWidth" >
            <el-input type="textarea" :row="50" v-model="infoForm.workExperience"
                      autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="项目经历" :label-width="formLabelWidth" >
            <el-input type="textarea" :row="50" v-model="infoForm.project"
                      autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="所获荣誉" :label-width="formLabelWidth" >
            <el-input type="textarea" :row="50" v-model="infoForm.honor"
                      autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="附件" :label-width="formLabelWidth" >
            <el-upload
                ref="upload"
                action="/api/upload/?ser=user"
                :on-success="uploadFile"
                :limit="1"
                :auto-upload="true">
              <i class="el-icon-upload"> 点击上传</i>
            </el-upload>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="save">保 存</el-button>
        </div>
      </el-dialog>

      <!--      <div class="resume_item_top">
              <span style="font-size:18px">基本信息</span>
              <el-button style="float: right" plain type="primary" size="small" icon="el-icon-edit">编辑</el-button>
            </div>
            <el-descriptions  :column="3"  border>
              <el-descriptions-item>
                <template slot="label">
                  期望职位
                </template>
                Java开发
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">
                  姓名
                </template>
                唐朝阳
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">
                  照片
                </template>
                <el-image style="width:100px;" src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg" fit="fit"></el-image>
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">
                  性别
                </template>
                男
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">
                  年龄
                </template>
                22
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">
                  民族
                </template>
                汉族
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">
                  籍贯
                </template>
                河南省漯河市
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">
                  现居地
                </template>
                厦门
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">
                  邮箱
                </template>
                15890224756@163.com
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">
                  联系电话
                </template>
                15890224756
              </el-descriptions-item>

              <el-descriptions-item>
                <template slot="label">
                  政治面貌
                </template>
                共青团员
              </el-descriptions-item><el-descriptions-item>
              <template slot="label">
                最高学历
              </template>
              本科
            </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">
                  工作经验
                </template>
               无
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">
                  期望薪资
                </template>
                15k
              </el-descriptions-item>
              <el-descriptions-item :span="2">
                <template slot="label">
                  附件
                </template>
                <el-link href="https://www.baidu.com" :underline="false" type="primary">附件</el-link>
              </el-descriptions-item>
              <el-descriptions-item :span="3">
                <template slot="label">
                  专业技能
                </template>
                熟练掌握 java 语法，集合等基础框架，熟练使用 IntelliJ IDEA 等开发工具，具有良好的编码习惯。 熟悉 JVM 内存结构，GC 机制原理 。熟悉多线程并发知识
                熟悉常用设计模式。 熟练使用 Mybatis、Spring、SpringMVC、SpringBoot 等框架。 熟练使用 MySQL 关系型数据库，Redis 非关系型数据库。 熟练使用 Maven 构建管理项目、Git 拉取提交代码。 熟练使用 Linux 常用命令，使用 Docker 部署项目，使用 Nginx 实现负载均衡。 熟悉 SpringCloud 分布式微服务框架。 熟悉 RabbitMQ 消息队列。
                熟悉 HTML、CSS、JavaScript、jQuery 等技术。
                熟悉前端 BootStrap、ElementUI 等 UI 框架和 Vue 框。
              </el-descriptions-item>
              <el-descriptions-item :span="3" labelStyle="width:100px">
                <template slot="label" >
                  自我评价
                </template>
                对软件开发行业具有浓厚的兴趣
                责任心强，积极向上
                具有较强的团队协作能力
                对新技术有很高的学习热情
              </el-descriptions-item>
            </el-descriptions>
            <el-divider></el-divider>
            <div class="resume_item_top">
              <span style="font-size:18px">教育经历</span>
              <el-button style="float: right" plain type="primary" size="small" icon="el-icon-plus">添加</el-button>
            </div>
            <el-descriptions  :column="3" title="教育经历1"  border>
              <template slot="extra">
                <el-button style="float: right" plain type="primary" size="small" icon="el-icon-delete">删除</el-button>
                <el-button style="float: right" plain type="primary" size="small" icon="el-icon-edit">编辑</el-button>
              </template>
              <el-descriptions-item>
                <template slot="label">
                  学校名称
                </template>
                辽宁工程技术大学
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">
                  学院
                </template>
                软件工程
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">
                  专业
                </template>
                网络工程
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">
                  担任职务
                </template>
                班长
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">
                  排名
                </template>
                前10%
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">
                  绩点
                </template>
                男
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">
                  就读学历
                </template>
                本科
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">
                  开始时间
                </template>
                2018-09-01
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">
                  毕业时间
                </template>
                2022-06-30
              </el-descriptions-item>
              <el-descriptions-item label-style="width:100px">
                <template slot="label">
                  主要课程
                </template>
                计算机硬件、数据结构、 操作系统、计算机网络、 数据库原理及应用、 java 高级开发技术、
                Linux 系统管理与应用、Oracle 数据库等。
              </el-descriptions-item>
            </el-descriptions>
            <el-divider></el-divider>
            <div class="resume_item_top">
              <span style="font-size:18px">工作经历</span>
              <el-button style="float: right" plain type="primary" size="small" icon="el-icon-edit">编辑</el-button>
            </div>
            <el-descriptions  :column="3" title="工作经历1"  border>
              <template slot="extra">
                <el-button style="float: right" plain type="primary" size="small" icon="el-icon-delete">删除</el-button>
                <el-button style="float: right" plain type="primary" size="small" icon="el-icon-edit">编辑</el-button>
              </template>
              <el-descriptions-item>
                <template slot="label">
                  公司
                </template>
                光大科技
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">
                  工作职位
                </template>
                Java开发
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">
                  薪资
                </template>
                保密
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">
                  开始时间
                </template>
                2022-07-01
              </el-descriptions-item>
              <el-descriptions-item :span="2">
                <template slot="label">
                  结束时间
                </template>
                2022-09-08
              </el-descriptions-item>
              <el-descriptions-item :span="3" label-style="width:100px">
                <template slot="label">
                  工作描述
                </template>
                1. 根据业务需求，负责系统开发和维护
                2. 在项目经理的带领下完成相关产品的模块设计、开发和交付工作，保证需求开发的质量
                3. 日常系统维护与问题处理

              </el-descriptions-item>
            </el-descriptions>
            <el-divider></el-divider>
            <div class="resume_item_top">
              <span style="font-size:18px">项目经历</span>
              <el-button style="float: right" plain type="primary" size="small" icon="el-icon-plus">添加</el-button>
            </div>
            <el-descriptions  :column="3" title="项目经历1"  border>
              <template slot="extra">
                <el-button style="float: right" plain type="primary" size="small" icon="el-icon-delete">删除</el-button>
                <el-button style="float: right" plain type="primary" size="small" icon="el-icon-edit">编辑</el-button>
              </template>
              <el-descriptions-item>
                <template slot="label">
                  项目名称
                </template>
                后台管理系统
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">
                  负责任务
                </template>
                后端开发
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">
                  开始时间
                </template>
                2022-07-01
              </el-descriptions-item>
              <el-descriptions-item :span="3">
                <template slot="label">
                  结束时间
                </template>
                2022-09-08
              </el-descriptions-item>
              <el-descriptions-item :span="3" label-style="width:100px">
                <template slot="label">
                  项目描述
                </template>
                后台权限管理系统主要实现的是用不同身份的用户登录系统可以拥有不同权限，也就拥有不同的
                功能。根据权限的不同来展示不同的界面。项目包括了用户登录、用户管理，角色管理、角色权限管理、个
                人信息等模块。采用 Maven 聚合工程进行开发，引入 ajax 进行异步通信，使用 ZTree 插件来树形展示权
                限，进行权限管理。
              </el-descriptions-item>
              <el-descriptions-item :span="3" label-style="width:100px">
                <template slot="label">
                  任务描述
                </template>
                1. 根据业务需求，负责系统开发和维护
                2. 在项目经理的带领下完成相关产品的模块设计、开发和交付工作，保证需求开发的质量
                3. 日常系统维护与问题处理
              </el-descriptions-item>
            </el-descriptions>
            <el-divider></el-divider>
            <div class="resume_item_top">
              <span style="font-size:18px">荣誉证书</span>
              <el-button style="float: right" plain type="primary" size="small" icon="el-icon-plus">添加</el-button>
            </div>
            <el-descriptions  :column="3" title="荣誉证书1"  border>
              <template slot="extra">
                <el-button style="float: right" plain type="primary" size="small" icon="el-icon-delete">删除</el-button>
                <el-button style="float: right" plain type="primary" size="small" icon="el-icon-edit">编辑</el-button>
              </template>
              <el-descriptions-item>
                <template slot="label">
                  证书名称
                </template>
                全国大学生英语四级
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">
                  证书级别
                </template>
                国家级
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">
                  颁奖单位
                </template>
                国家教育部
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">
                  获得时间
                </template>
                2022-09-08
              </el-descriptions-item>
            </el-descriptions>
            <div class="resume_item_bottom">
            </div>-->
      <el-dialog
          title="提示"
          :visible.sync="dialogVisible"
          width="30%">
        <span>您确定要删除简历《{{ resumeName }}》吗？</span>
        <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="delResume">确 定</el-button>
  </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>

import {addResume, deleteResume, getResume, updateResume} from "@/network/recruit";

export default {
  name: "Resume",
  data() {
    return {
      formLabelWidth:'100px',
      dialogFormVisible:false,
      resumeList: [],
      resumeName: '',
      userName: '',
      resume: {
        photoUrl: ''
      },
      dialogVisible: false,
      infoForm: {
        resumeId:'',
        userName: '',
        resumeName: '',
        name: '',
        sex: '',
        age: '',
        nation: '',
        nativePlace: '',
        residence: '',
        tel: '',
        email: '',
        politicsStatus: '',
        maxEdu: '',
        photoUrl: '',
        expectSalary: '',
        skill: '',
        selfEvaluation: '',
        university: '',
        graduationTime:'',
        workTime: '',
        workExperience: '',
        honor: '',
        project: '',
        accessoryUrl: ''
      }
    }
  },
  watch: {
    resumeName(newName) {
      this.resume = this.resumeList.find(r => r.resumeName == newName);
    }
  },
  mounted() {
    if (localStorage.getItem("common_userName")) {
      this.userName = localStorage.getItem("common_userName");
      this.resumeInfo(this.resumeName);
    }
  },
  methods: {
    resumeInfo() {
      getResume(this.userName).then(res => {
        if (res != undefined) {
          this.resumeList = res.data.data;
          if(this.resumeList!=undefined){
            this.resumeName = this.resumeList[0].resumeName;
            this.resume = this.resumeList[0];
          }
        }
      })
    },
    delResume() {
      deleteResume(this.resume.resumeId).then(res => {
        if (res != undefined) {
          this.$message.success("简历" + this.resume.resumeName + "删除成功");
          this.resumeInfo();
          this.dialogVisible = false;
        }
      })
    },
    save(){
      this.infoForm.userName = localStorage.getItem("common_userName");
      if(this.infoForm.resumeName==''){
        this.$message.warning("简历名称不能为空");
        return;
      }
      if(this.infoForm.resumeId==undefined||this.infoForm.resumeId==''){
        addResume(this.infoForm).then(res=>{
          if(res!=undefined){
            this.$message.success(res.data.data);
            this.resumeInfo();
            this.dialogFormVisible=false;
          }
        })
      }
      if(this.infoForm.resumeId!=undefined&&this.infoForm.resumeId!=''){
        updateResume(this.infoForm).then(res=>{
          if(res!=undefined){
            this.$message.success(res.data.data);
            this.resumeInfo();
            this.dialogFormVisible=false;
          }
        })
      }
    },
    news(){
      this.infoForm.resumeId ='';
      this.dialogFormVisible = true;
    },
    edit(){
      this.infoForm = this.resume;
      this.infoForm.resumeId = this.resume.resumeId;
      this.dialogFormVisible = true;
    },
    uploadSuccess(res) {
      if(res.data!=undefined){
        this.infoForm.photoUrl=res.data;
      }
    },
    uploadFile(res){
      if(res.data!=undefined){
        this.infoForm.accessoryUrl=res.data;
      }
    }
  }
}
</script>

<style scoped>
.resume_operation {
  padding: 20px;
  background-color: white;
  min-height: 464px;
  box-shadow: 0 5px 5px 0 #eceaea;
}

/deep/ .el-input__inner {
  height: 35px;
  line-height: 35px;
}

.el-divider--horizontal {
  margin: 15px 0 0 0;
}

.resume_item_top {
  height: 30px;
  line-height: 30px;
  margin: 15px 0;
}

.resume_item_bottom {
  height: 30px;
}
</style>